<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="js/layui-v2.5.4/css/layui.css" />
<script src="js/layui-v2.5.4/layui.js" type="text/javascript"
	charset="utf-8"></script>
</head>
<body>
	<!-- 条件区 -->
	<div class="layui-form-item"
		style="margin-top: 10px; margin-left: 10px">
		<form class="layui-form" method="post" onsubmit="return false;">
			<label class="layui-form-mid">姓名:</label>
			<div class="layui-input-inline" style="width: 100px;">
				<input type="text" id="ename" autocomplete="off" class="layui-input"
					placeholder="请输入姓名">
			</div>
			<label class="layui-form-mid">部门</label>
			<div class="layui-input-inline" style="width: 100px;">
				<select id="dnameSeach">
					<option value="">--请选择--</option>
				</select>
			</div>
			<label class="layui-form-mid">入职日期:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<input id="hiredate" type="text" autocomplete="off"
					class="layui-input" placeholder="请选择开始日期">
			</div>
			<div class="layui-input-inline" style="width: 200px;">
				<input id="hiredate2" type="text" autocomplete="off"
					class="layui-input" placeholder="请选择结束日期">
			</div>
		</form>
		<button class="layui-btn" id="mySearch"
			data-type="mySearchTableReload">搜索</button>
		<button class="layui-btn" onclick="renovates()">刷新</button>
	</div>
	<script type="text/javascript">
		function renovates() {
			window.location.reload(true);
		}
	</script>
	<!-- 顶部工具栏 -->
	<script type="text/html" id="topToolbar">
				<a class="layui-btn layui-btn layui-btn-sm" lay-event="insertBtnEve">
				 <i class="layui-icon">&#xe608;</i> 添加
				</a>
	</script>
	<!--行内工具栏-->
	<script type="text/html" id="barDemo">
  			<a class="layui-btn layui-btn-xs" lay-event="updateBtnEve">修改</a>
			<a class="layui-btn layui-btn-xs" lay-event="detailBtnEve">详情</a>
			<a class="layui-btn layui-btn-xs" lay-event="deleteBtnEve">删除</a>
		</script>
	<!-- 表格 -->
	<table class="layui-hide" id="myTable" lay-filter="myTableFil"></table>

	<!-- 增、改、单查共用页面，都不要id，否则和条件区重复了，直接调用serialize即可获取表单数据 -->
	<div id="myHtml" style="display: none; margin-top: 20px;">
		<form class="layui-form" id="myForm" lay-filter="myFormFil"
			onsubmit="return false;">
			<!-- 隐藏id -->
			<input type="hidden" id="empNo" name="empNo" value="0">
			<div class="layui-form-item">
				<label class="layui-form-label">姓名:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="ename" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">入职日期:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input id="hiredateSave" type="text" name="hiredate"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">状态:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="radio" name="state" value="0" title="在职" checked>
					<input type="radio" name="state" value="1" title="离职">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">部门:</label>
				<div class="layui-input-inline" style="width: 150px;">
					<select id="dnameSave" name="deptNo">
						<option value="">请选择</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">备注:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="remake" class="layui-input">
				</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;"
				id="mySubmitDiv">
				<button class="layui-btn" lay-filter="mySubmitFil" lay-submit="">提交</button>
			</div>
		</form>
	</div>

	<script>
		/* 所有js代码都写这一行里面 */
		layui.use([ 'table', 'form', 'laydate' ], function() {
			var table = layui.table;
			var form = layui.form;
			var laydate = layui.laydate;
			var $ = layui.$;
			//绑定日期插件
			laydate.render({
				elem : '#hiredate', //开始日期
				type : 'datetime'
			});
			laydate.render({
				elem : '#hiredate2', //结束日期
				type : 'datetime'
			});
			laydate.render({
				elem : '#hiredateSave', //save日期
				type : 'datetime'
			});
			//渲染表格数据
			table.render({
				elem : '#myTable',
				url : 'emp/selectPage', //数据接口
				toolbar : '#topToolbar',
				method : 'post',
				title : '员工表',
				page : true, //开启分页
				request : {
					pageName : 'current', //页码的参数名称，默认：page
					limitName : 'size' //每页数据量的参数名，默认：limit
				},
				cols : [ [ {
					field : 'empNo',
					title : '编号',
					width : '10%',
					align : 'center',
					sort : true
				//开启排序，layui自己排
				}, {
					field : 'ename',
					title : '姓名',
					width : '10%',
					align : 'center'
				}, {
					field : 'hiredate',
					title : '入职时间',
					width : '20%',
					align : 'center'
				}, {
					field : 'dname',
					title : '部门名称',
					width : '10%',
					align : 'center',
					templet : function(d) {
						return d.dept.dname;
					}
				}, {
					field : 'state',
					title : '状态',
					width : '10%',
					align : 'center',
					templet : function(d) {
						if (d.state == 0) {
							return "在职";
						} else if (d.state == 1) {
							return "离职";
						} else {
							return "异常";
						}
					}
				}, {
					field : 'remake',
					title : '备注',
					width : '15%',
					align : 'center'
				}, {
					fixed : '',
					title : '操作',
					width : '25%',
					align : 'center',
					toolbar : '#barDemo'
				} ] ],
				id : "myTableReloadId"
			});
			/* 以layui格式创建函数，暂时只有一个函数：mySearchTableReload */
			active = {
				mySearchTableReload : function() {
					table.reload('myTableReloadId', {
						where : {
							'ename' : $('#ename').val(),
							'hiredate' : $('#hiredate').val(),
							'hiredate2' : $('#hiredate2').val(),
							'deptNo' : $('#dnameSeach').val()
						}
					});
				}
			};
			//监听搜索按钮，执行mySearchTableReload方法
			$('#mySearch').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			$.post("dept/selectAll", function(res) {
				var shtml = "<option></option>";
				$.each(res, function(index, value) {
					shtml += '<option value="' + value.deptNo + '" > ' + value.dname + '</option>';
				});
				$('#dnameSeach').html(shtml);
				$('#dnameSave').html(shtml);
				form.render('select'); //刷新select选择框渲染
			}, "json");
			//监听顶部工具栏事件，添加/修改按钮，点击弹出页面
			table.on('toolbar(myTableFil)', function(obj) {
				switch (obj.event) {
				case 'insertBtnEve': {
					$('#mySubmitDiv').css("display", "block");

					//如果先点击了修改按钮，表单里有值了，这里重置一下
					$('#myForm')[0].reset();
					$('#myformselect').val("");
					//重置不了id，这里手动重置一下
					$('#empNo').val(0);
					layer.open({
						type : 1,
						title : '添加页面',
						content : $("#myHtml"),
						area : [ '500px', '500px' ]
					});
				}
					break;
				}

			});
			table.on('tool(myTableFil)', function(obj) {
				var data = obj.data;
				if (obj.event === 'updateBtnEve') {
					//异步请求到所有部门，res就是返回的全部部门集合
					$.post("dept/selectAll", function(res) {
						var shtml = "<option></option>";
						$.each(res, function(index, value) {
							//如果选中的这行的部门 和 所有的部门中的某个部门一致
							if (data.dept.deptNo == value.deptNo) {
								shtml += '<option value="' + value.deptNo + '" selected > ' + value.dname + '</option>';
							} else {
								shtml += '<option value="' + value.deptNo + '" > ' + value.dname + '</option>';
							}
						});
						$('#dnameSave').html(shtml);
						form.render('select'); //刷新select选择框渲染
					}, "json");
					$('#mySubmitDiv').css("display", "block");
					form.val("myFormFil", data);
					edit_index = layer.open({
						type : 1,
						title : '您正在修改' + data.ename + '的信息',
						content : $("#myHtml"),
						scrollbar : true, /* 滚动条 */
						resize : true, /* 是否允许拉伸 */
						area : [ '600px', '500px' ]
					});
				} else if (obj.event === 'detailBtnEve') {
					//隐藏提交按钮
					$('#mySubmitDiv').css("display", "none");
					form.val("myFormFil", data);
					edit_index = layer.open({
						type : 1,
						title : '您正在查看' + data.ename + '的信息',
						content : $("#myHtml"),
						scrollbar : true, /* 滚动条 */
						resize : true, /* 是否允许拉伸 */
						area : [ '600px', '400px' ]
					});
				} else if (obj.event === 'deleteBtnEve') {
					layer.confirm('确认删除id为[' + data.empNo + ']的信息吗?', function(index) {
						$.post("emp/delete", {
							"empNo" : data.empNo,
						}, function(res) {
							if (res.code == 0) {
								layer.msg(res.msg, {
									icon : 1,
									time : 1000
								}, function() {
									layer.close(layer.index);
									window.location.reload();
								});
							} else {
								layer.msg(res.msg, {
									icon : 2,
									time : 1000
								});
							}
						}, "json");
					});
				}
			});

			//监听新增/修改页面的提交按钮
			form.on('submit(mySubmitFil)', function(data) {
				$('#mySubmitDiv').css("display", "block");
				console.log(data.field);
				//判断是添加还是修改
				var myUrl;
				if ($('#ename').val() != null) {
					if ($('#empNo').val() == "0") {//为0说明没赋值，说明是添加
						myUrl = "emp/insert";
					} else {
						myUrl = "emp/update";
					}
				}
				$.post(myUrl, data.field, function(res) {
					if (res.code == 0) {
						//根据后台提示信息弹出msg
						layer.msg(res.msg, {
							icon : 1,
							time : 1000
						}, function() {
							layer.close(layer.index);
							window.location.reload();
						});
					} else {
						layer.msg(res.msg, {
							icon : 5,
							time : 1000
						});
					}
				}, "json");

			});
		});
	</script>

</body>
</html>